<template>
  <div id="order-detail">
    <div style="display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;">
      <div class="item-wrap">
        <div class="label">订单号：</div>
        <div>
          <el-input v-model="dataProvider.orderNo" :disabled="true"></el-input>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">姓名：</div>
        <div>
          <el-input v-model="dataObject.orderElement.customerName"></el-input>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">手机号：</div>
        <div>
          <el-input v-model="dataObject.orderElement.telephoneNo"></el-input>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">所在地：</div>
        <div>
          <el-cascader v-model="selectedCity" :options="citylist" :show-all-levels="true" :props="props.cityprops">
          </el-cascader>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">详细地址：</div>
        <div>
          <el-input v-model="dataObject.orderElement.address"></el-input>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">机型：</div>
        <div>
          <el-cascader v-model="selectedDevice" :options="deviceList" :show-all-levels="true"
            :props="props.deviceProps"></el-cascader>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">总价：</div>
        <div>
          <el-input v-model="dataObject.price"></el-input>
        </div>
      </div>
      <div class="item-wrap">
        <div class="label">服务方式：</div>
        <div>
          <el-select v-model="dataObject.serviceType" disabled>
            <el-option value="SM" label="上门维修"></el-option>
            <el-option value="DD" label="到店维修"></el-option>
            <el-option value="JS" label="寄送维修"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="item-wrap" v-for="item in dataObject.orderFailures" :key="item">
      <div class="label">故障：</div>
      <div>
        <el-input v-model="item.failureSubName"></el-input>
      </div>
      <div class="label">处理方案：</div>
      <div>
        <el-input v-model="item.solution"></el-input>
      </div>
      <div class="label">价格：</div>
      <div>
        <el-input v-model="item.price"></el-input>
      </div>
    </div>
    <div class="item-wrap" v-for="item in dataObject.orderFailures" :key="item">
      <div class="label">备注：</div>
      <div>
        <el-input v-model="dataObject.remark" disabled></el-input>
      </div>
    </div>
    <div class="item-wrap">
      <div class="label"> </div>
      <div>
        <el-button type="primary" @click="addFalt">添加故障</el-button>
      </div>
    </div>

    <div slot="footer" class="dialog-footer" style="float: right; padding: 20px 0;">
      <el-button>关闭</el-button>
      <el-button type="primary" @click="update">修改</el-button>
    </div>

  </div>

</template>
<script>
  import r from '../../utils/RequestUtil'
  export default {
    name: "order_detail_s",
    data: function () {
      return {
        visible: false,
        citylist: [],
        deviceList: [],
        faltList: [],
        data: {},
        props: {
          cityprops: {
            value: "provinceName",
            label: "provinceName",
            children: "children"
          },
          deviceProps: {
            value: "name",
            label: "name",
            children: "children"
          }
        }
      }
    },
    methods: {
      addFalt: function () {
        this.dataObject.orderFailures.push({})
      },
      isBlank: function (str) {
        if (str === null || str === undefined || str === '') {
          return true;
        } else {
          return false;
        }
      },

      update: function () {
        if (this.isBlank(this.dataObject.orderElement.customerName)) {
          r.message("姓名为必填项");
          return;
        }
        if (this.isBlank(this.dataObject.orderElement.telephoneNo)) {
          r.message("手机号为必填项");
          return;
        }
        if (this.selectedCity.length < 3) {
          r.message("请选择区域");
          return;
        }
        if (this.isBlank(this.dataObject.orderElement.address)) {
          r.message("详细地址为必填项");
          return;
        }
        if (this.selectedDevice.length < 4) {
          r.message("设备类型为必填项");
          return;
        }
        if (isNaN(this.dataObject.price)) {
          r.message("请填写正确的总价");
          return;
        }
        for (let i = 0; i < this.dataObject.orderFailures.length; i++) {
          if (this.isBlank(this.dataObject.orderFailures[i].failureSubName) || this.isBlank(this.dataObject
              .orderFailures[i].solution) || this.isBlank(this.dataObject.orderFailures[i].price)) {
            r.message("请填写完整的故障信息");
            return;
          }
        }
        let params = new Object();
        let orderElement = new Object();
        params.orderNo = this.dataObject.orderNo;
        orderElement.province = this.selectedCity[0];
        orderElement.city = this.selectedCity[1];
        orderElement.county = this.selectedCity[2];
        params.brandName = this.selectedDevice[1];
        params.modelName = this.selectedDevice[2];
        params.deviceColor = this.selectedDevice[3];
        params.orderFailures = this.dataObject.orderFailures;
        params.price = this.dataObject.price;
        this.$emit("update", params);
      }
    },
    computed: {
      formatterFalt: function () {
        let orderFailures = this.dataProvider.orderFailures;
        let str = "";
        for (let i = 0; i < orderFailures.length; i++) {
          str += orderFailures[i].failureSubName + ":" + orderFailures[i].solution + "[￥" + orderFailures[i].price +
            "]" + ";";
        }
        return str;
      },
      falt: function () {
        let orderFailures = this.dataProvider.orderFailures;
        let str = "";
        for (let i = 0; i < orderFailures.length; i++) {
          str += orderFailures[i].failureSubName + ";";
        }
        return str;
      },
      solution: function () {
        let orderFailures = this.dataProvider.orderFailures;
        let str = "";
        for (let i = 0; i < orderFailures.length; i++) {
          str += orderFailures[i].solution + ";";
        }
        return str;
      },
      dataObject: function () {
        return Object.assign(this.data, this.dataProvider);
      },
      selectedCity: function () {
        let a = [];
        a.push(this.dataObject.orderElement.province);
        a.push(this.dataObject.orderElement.city);
        a.push(this.dataObject.orderElement.county);
        return a;
      },
      selectedDevice: function () {
        let a = [];
        a.push('手机');
        a.push(this.dataObject.brandName);
        a.push(this.dataObject.modelName);
        a.push(this.dataObject.deviceColor);
        return a;
      },
    },
    props: {
      dataProvider: {
        type: Object,
        required: true
      }
    },
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  .item-wrap {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .label {
    font-size: 14px;
    width: 70px;
    padding: 0 8px;
    text-align: right;
  }

</style>
